<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ count }}</p>
    <button @click="count++">累加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue";

/*
  ref可以接受基本值和对象值
    * 如果接受一个基本值,则直接返回一个ref对象,里边保存这个值
    * 如果接受一个对象值,则也是返回一个ref对象,但是ref会把这个值通过reactive方法得到代理对象,放在ref对象的value属性上

  reactive不接受基本类型值

  为什么ref对象已经是响应式了,而ref内部还要把接受的对象类型进行调用reactive得到代理对象???
    * ref对象的响应式 只是说这个ref对象中的value值被替换的时候,可以进行响应,但是如果保存的是一个对象,对象内部的改动,并没有影响.value中保存的地址.所以ref对象的响应式在这里无能为力
    * 所以ref对象中value如果保存的是对象类型,我们需要把这个对象类型通过reactive方法得到代理对象,来实现这个数据对象的响应式
*/

const person = ref({ name: "laowang", age: 18 });
console.log(person);

let a = ref([1, 2, 3]);
// a.value = [2,3,4]  // 数据有响应式  ref的值是一个对象  那么 a 这个对象就是 ref对象  监听的是 .value 的值 改变
a.value.push(4);  // 数据有响应式  ref的值是一个对象  那么 a.value 这个对象就是 proxy对象  监听的是 .value 内部的值 改变

let count = reactive(Object(0));  // 数据没有响应式  reactive监听对象内部改变
console.log(count);

/*
  reactive对象不能被替换，否则没有响应式
  但是ref对象是响应式对象，我们替换了ref对象中保存的值，仍然拥有响应式
 */
</script>
